<template>
    <div>
        <div>
            <button @click="printEditorHtml">print html</button>
            <button @click="insertTextHandler">insert text</button>
            <button @click="disableHandler">disable</button>
        </div>
        <div style="border: 1px solid #ccc; margin-top: 10px;">
            <!-- 工具栏 -->
            <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editor"
                :defaultConfig="toolbarConfig"
            />
            <!-- 编辑器 -->
            <Editor
                style="height: 400px; overflow-y: hidden;"
                :defaultConfig="editorConfig"
                v-model="html"
                @onChange="onChange"
                @onCreated="onCreated"
            />
        </div>
        <div style="margin-top: 10px;">
            <textarea
                v-model="html"
                readonly
                style="width: 100%; height: 200px; outline: none;"
            ></textarea>
        </div>
    </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

export default {
    name: 'MyEditor',
    components: { Editor, Toolbar },
    data() {
        // 自定义插入图片/视频
        const handleUpload = async (file, insertFn) => {
            let form = new FormData();
            form.append("file", file);
            console.log(file);
            console.log(form)
            // form.append("dealType", this.$store.state.uploadData.dealType);
            let res = await uploadFile(file);  //此方法返回上传后的id
            // 最后插入图片 insertFn方法参数(url, alt, href)，路径根据自己的项目需求配置
            insertFn(
                `http://localhost:8081/microcircle/editorUpload/`,
                    '',
                `https://h-siyun.oss-cn-hangzhou.aliyuncs.com/${res}`)
        }

        //上传图片视频方法
        const uploadFile = async (file) => {
            console.log("{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{")
            console.log(file);
            var insert = new URLSearchParams();
            insert.append('file',file)
            this.$http.post('/microcircle/editorUpload',insert,{
                headers:{
                    'C':'application/x-www-form-urlencoded'
                }
            }).then(res => {
                console.log(res.data);

            });   //此处换为自己的上传接口地址
          console.log("++++++++++++++++")
        }
        return {
            editor: null,
            html: '<p></p>',
            toolbarConfig: {
                // toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
                // excludeKeys: [ /* 隐藏哪些菜单 */ ],
            },
            editorConfig: {
                placeholder: "请输入内容...",
                MENU_CONF: {
                    uploadImage: {   //上传图片配置
                        customUpload: handleUpload
                    },
                    uploadVideo: {  //上传视频配置
                        customUpload: handleUpload
                    }
                }
            }
        }
    },
    methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错
        },
        onChange(editor) {
            console.log('onChange', editor.getHtml()) // onChange 时获取编辑器最新内容
        },
        insertTextHandler() {
            const editor = this.editor
            if (editor == null) return
            editor.insertText(' hello ')
        },
        printEditorHtml() {
            const editor = this.editor
            if (editor == null) return
            console.log(editor.getHtml())
        },
        disableHandler() {
            const editor = this.editor
            if (editor == null) return
            editor.disable()
        }
    },
    mounted() {
        // 模拟 ajax 请求，异步渲染编辑器
        /*setTimeout(() => {
            this.html = '<p>Ajax 异步设置内容 HTML</p>'
        }, 1500)*/
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁 editor ，重要！！！
    },
}
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
